<template>
  <BasicModal
    @register="registerModal"
    title="Online权限授权"
    width="900"
    :maskClosable="false"
    :okButtonProps="{ style: { display: 'none' } }"
    :defaultFullscreen="true"
    cancelText="关闭"
    @cancel="closeModal"
  >
    <a-spin :spinning="loading">
      <a-row>
        <a-col span="12">
          <a-tabs v-model:activeKey="authMode" @change="onAuthModeChange">
            <a-tab-pane tab="角色授权" key="role" forceRender>
              <LeftRole ref="roleRef" @select="onSelectRole" />
            </a-tab-pane>
            <a-tab-pane tab="部门授权" key="depart" forceRender>
              <LeftDepart ref="departRef" @select="onSelectDepart" />
            </a-tab-pane>
            <a-tab-pane tab="人员授权" key="user" forceRender>
              <LeftUser ref="userRef" @select="onSelectUser" />
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col span="1" />
        <a-col span="11">
          <a-tabs v-model:activeKey="activeKey" @change="onAuthTypeChange">
            <a-tab-pane tab="字段权限" key="field" forceRender>
              <AuthFieldTree ref="fieldRef" :cgformId="cgformId" />
            </a-tab-pane>
            <a-tab-pane tab="按钮权限" key="button" forceRender>
              <AuthButtonTree ref="buttonRef" :cgformId="cgformId" />
            </a-tab-pane>
            <a-tab-pane tab="数据权限" key="data" forceRender>
              <AuthDataTree ref="dataRef" :cgformId="cgformId" />
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-spin>
  </BasicModal>
</template>
<script lang="ts">
  import LeftRole from './setter/LeftRole.vue';
  import LeftDepart from './setter/LeftDepart.vue';
  import LeftUser from './setter/LeftUser.vue';
  import AuthFieldTree from './setter/AuthFieldTree.vue';
  import AuthButtonTree from './manager/AuthButtonTree.vue';
  import AuthDataTree from './setter/AuthDataTree.vue';
  import { defineComponent, ref, computed, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  export default defineComponent({
    name: 'AuthSetterModal',
    components: {
      BasicModal,
      LeftRole,
      LeftDepart,
      LeftUser,
      AuthFieldTree,
      AuthButtonTree,
      AuthDataTree,
    },
    props: {
      tableType: { type: Number, default: 1 },
    },
    setup(props) {
      const cgformId = ref('');
      const loading = ref(false);
      const activeKey = ref('field');
      const authMode = ref('role');
      const refs = {
        fieldRef: ref(),
        buttonRef: ref(),
        dataRef: ref(),
        roleRef: ref(),
        userRef: ref(),
        departRef: ref(),
      };
      const activeRole = ref('');
      const hasDataAuth = computed(() => props.tableType == 1 || props.tableType == 2);
      const [registerModal, { closeModal }] = useModalInner((data) => {
        activeKey.value = 'field';
        if (cgformId.value != data.cgformId) {
          cgformId.value = data.cgformId;
          reset();
        }
      });
      function getActiveRef(key = activeKey.value) {
        var _a;
        return (_a = refs[key + 'Ref']) == null ? void 0 : _a.value;
      }
      async function reset() {
        await nextTick();
        clearLeftCurrentTabSelect();
        getActiveRef().clear();
      }
      function onSelectRole(roleId) {
        activeRole.value = roleId;
        onAuthTypeChange(activeKey.value);
        clearLeftOtherTabSelect();
      }
      function onSelectDepart(departid) {
        activeRole.value = departid;
        onAuthTypeChange(activeKey.value);
        clearLeftOtherTabSelect();
      }
      function onSelectUser(userId) {
        activeRole.value = userId;
        onAuthTypeChange(activeKey.value);
        clearLeftOtherTabSelect();
      }
      function clearLeftOtherTabSelect() {
        if (authMode.value == 'role') {
          refs.departRef.value.clearSelected();
          refs.userRef.value.clearSelected();
        } else if (authMode.value == 'depart') {
          refs.roleRef.value.clearSelected();
          refs.userRef.value.clearSelected();
        } else if (authMode.value == 'user') {
          refs.departRef.value.clearSelected();
          refs.roleRef.value.clearSelected();
        }
      }
      function clearLeftCurrentTabSelect() {
        if (authMode.value == 'role') {
          refs.roleRef.value.clearSelected();
        } else if (authMode.value == 'depart') {
          refs.departRef.value.clearSelected();
        } else if (authMode.value == 'user') {
          refs.userRef.value.clearSelected();
        }
        getActiveRef().clearChecked();
      }
      async function onAuthTypeChange(key) {
        await nextTick();
        if (activeRole.value) {
          getActiveRef(key).loadChecked(activeRole.value, authMode.value);
        }
      }
      function onAuthModeChange() {
        clearLeftCurrentTabSelect();
      }
      return Object.assign({}, refs, {
        cgformId,
        loading,
        activeKey,
        hasDataAuth,
        authMode,
        onAuthModeChange,
        onAuthTypeChange,
        closeModal,
        onSelectRole,
        onSelectDepart,
        onSelectUser,
        registerModal,
      });
    },
  });
</script>
<style scoped></style>
